.VPNav {
  position: sticky !important;
  .home {
    background-color: transparent !important;
    backdrop-filter: blur(1rem);
    transition: 0.15s ease-in-out;
    opacity: 1;

    &.top {
      opacity: 0;
      backdrop-filter: none;
    }
    &:hover {
      opacity: 1;
    }
  }
}

/* 搜索 */
#local-search {
  margin-left: auto;
  transform: scale(0.75);
  button {
    border-radius: 0.6em;
    padding: 0.8rem 1rem;
  }
  .DocSearch-Button-Keys {
    margin-left: auto;
    border-radius: 4rem;
  }
}

.VPLocalSearchBox {
  --at-apply: "animate-fade-in animate-duration-200";
  .shell {
    --at-apply: "animate-fade-in-down animate-ease-out animate-duration-300";
    ul {
      li {
        --at-apply: "animate-fade-in animate-ease-out animate-duration-300";
      }
    }
    .search-bar {
      border-radius: 0.4rem;
    }
  }
  .backdrop {
    transition: backdrop-filter, opacity 0.15s ease-in-out;
    backdrop-filter: blur(0.5rem);
  }
}

/* VPHomeFeatures  */
.VPHomeFeatures .VPFeature {
  border-color: #b9b9b910;
  &:hover {
    box-shadow: var(--default-shadow);
  }
}

.VPContent {
  .content-container {
    h1:nth-of-type(1) {
      text-align: center;
    }
  }
}

// 文档判断内容渐入
#VPContent > div > div.VPHero.has-image.VPHomeHero > div > div.main > p {
  margin: 0.5em 0 0.2em 0;
}
#VPContent .main {
  h1 {
    padding: 1.5rem 0;
  }
}
#VPContent .VPHero.has-image.VPHomeHero .main {
  & > h1 {
    --lv: 0;
    --delay: 50ms;
    --start: 0ms;
    --anima: latter-slice-top;
    animation: var(--anima) 1s both;
    animation-delay: calc(var(--lv) * var(--delay) + var(--start));
  }
  .actions .action {
    .VPButton {
      border: 1px solid #b9b9b910;
      padding: 1rem;
      line-height: 0;
    }
  }
}
#VPContent .VPHomeFeatures {
  --delay: 50ms;
  --start: 0ms;
  --anima: latter-slice-top;
  .item {
    animation: var(--anima) 1s both;
    animation-delay: calc(var(--lv) * var(--delay) + var(--start));
    &:nth-child(1) {
      --lv: 3;
    }
    &:nth-child(2) {
      --lv: 4;
    }
    &:nth-child(3) {
      --lv: 5;
    }
    &:nth-child(4) {
      --lv: 6;
    }
    &:nth-child(5) {
      --lv: 7;
    }
  }
}
// 渐入动画
// 侧边菜单栏
#VPSidebarNav .VPSidebarItem {
  --anima: latter-slice-right !important;
}

/* 段落 */
#VPSidebarNav .VPSidebarItem .level-1,
#VPContent .content > div > main > div > div > *,
#VPContent .VPHero.has-image.VPHomeHero .main .actions > *,
[data-fades] > * {
  --lv: 0;
  --delay: 50ms;
  --start: 0ms;
  --anima: latter-slice-top;
  animation: var(--anima) 0.4s both;
  animation-delay: calc(var(--start) + var(--lv) * var(--delay));
  @for $i from 1 through 20 {
    &:nth-child(#{$i}) {
      --lv: #{$i};
    }
  }
}

// 右边目录
// #VPContent .aside .aside-container {
//   --lv: 0;
//   --delay: 50ms;
//   --start: 0ms;
//   --anima: latter-slice-left;
//   animation: var(--anima) 0.4s both;
//   animation-delay: calc(var(--start) + var(--lv) * var(--delay));
//   .VPDocAsideOutline ul > li {
//     --lv: 0;
//     --delay: 50ms;
//     --start: 0ms;
//     --anima: latter-slice-left;
//     animation: var(--anima) 0.4s both;
//     animation-delay: calc(var(--start) + var(--lv) * var(--delay));
//     @for $i from 1 through 30 {
//       &:nth-child(#{$i}) {
//         --lv: #{$i};
//       }
//     }
//   }
// }

[data-fade] {
  --lv: 0;
  --delay: 50ms;
  --start: 0ms;
  --anima: latter-slice-top;
}

@media (prefers-reduced-motion: no-preference) {
  [data-fades] > *,
  [data-fade] {
    animation: var(--anima) 1s both;
    animation-delay: calc(var(--lv) * var(--delay) + var(--start));
  }
}

/* 渐进动画 */
@keyframes latter-slice-top {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    transform: none;
  }
}
/* 渐进动画 */
@keyframes latter-slice-left {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    transform: none;
  }
}
@keyframes latter-slice-right {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    transform: none;
  }
}
[data-fade-controller="false"][data-fade] {
  animation: none;
}
[data-fades-controller="false"][data-fades] > * {
  animation: none;
}

.is-home .vp-doc {
  max-width: 1500px !important;
  margin: 0 auto;
}

.VPLink.link.VPNavBarMenuLink span {
  letter-spacing: 0.2em;
}

.pager .VPLink {
  --at-apply: "card-df";
}


.VPSidebar { 
  --at-apply: "lg:animate-[fade-in-left-df_0.3s_ease]"
}

@keyframes fade-in-left-df {
  0% {
    opacity: 0;
    transform: translateX(-20%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.VPHome {
  margin-bottom: 0 !important;
}

#VPContent .content > div > main > div > div > div.vp-adaptive-theme {
  max-width: 90vw;
  border-radius: 6px;
  margin: 0 auto;
  box-shadow:
    inset rgba(0, 0, 0, 0.1) 0px 2px 5px -1px,
    inset rgba(0, 0, 0, 0.1) 0px 1px 3px -1px;
  --at-apply: "border-default dark:(shadow-lg shadow-inset)";
}

// 代码块
.vp-adaptive-theme,
.vp-code-group {
  .vp-adaptive-theme {
    margin-bottom: 0 !important;
  }
}

.VPContent .content-container img {
  border-radius: 0.375rem;
  --at-apply: "border-default";
}

.VPLocalNav .VPLocalNavOutlineDropdown {
  .items {
    .header {
      display: none;
    }
    --at-apply: "card-df";
  }
}
.vp-doc h3 {
  margin: 1.6rem 0 1rem 0;
}
